import 'package:badges/badges.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dwh5/pages/home/goodsDetail/content.dart';
import 'package:flutter_dwh5/pages/home/goodsDetail/cxContent.dart';
import 'package:flutter_dwh5/pages/home/goodsDetail/goodsEvaluate.dart';

import 'package:flutter_dwh5/pages/home/goodsDetail/partsWidget.dart';
// import 'package:badges/badges.dart' as badges;
import 'package:flutter_dwh5/utils/modalBottom.dart';

class GoodsDetail extends StatefulWidget {
  final int id;

  const GoodsDetail({Key key, this.id}) : super(key: key);
  @override
  State<GoodsDetail> createState() => _GoodsDetailState();
}

class _GoodsDetailState extends State<GoodsDetail> {
  bool switched = false;

  bool showCode = false;

  List foot = [
    {'text': '左脚', 'active': false},
    {'text': '右脚', 'active': false}
  ];
  //部件
  List partsList = [
    {'image': 'images/login/logo.png', 'text': '鞋头', 'active': false},
    {'image': 'images/login/logo.png', 'text': '鞋带', 'active': false}
  ];
  //材质
  List materList = [
    {'text': '帆布', 'active': false},
    {'text': '皮革', 'active': false},
    {'text': '网格', 'active': false},
  ];
  //颜色
  List colorList = [
    {'text': '红色', 'color': 0xFF42A5F5, 'active': false},
    {'text': '蓝色', 'color': 0xFF42A5F5, 'active': false}
  ];

//tabs
  List<Widget> tabs = [
    Tab(
      text: '商品详情',
    ),
    Tab(
      text: '商品评价',
    ),
  ];
  bool showModal = false;
  _alertDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return CupertinoAlertDialog(
            title: Text(
              '温馨提示',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
            content: Text(
              '您确定需要重置吗，如果确定那么其他 参数将作废',
            ),
            actions: <Widget>[
              TextButton(
                child: Text("取消"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              TextButton(
                child: Text("确定"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          );
        });

    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('多威商城商品详情'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              shrinkWrap: true,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 227,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('images/home/good.png'),
                          fit: BoxFit.cover)),
                  child: Container(
                    padding: EdgeInsets.only(top: 15, right: 15),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Container(
                          alignment: Alignment.center,
                          width: 45,
                          height: 45,
                          decoration: BoxDecoration(
                              color: Color.fromRGBO(193, 193, 193, 1),
                              shape: BoxShape.circle),
                          child: Text(
                            '旋转',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            _alertDialog();
                          },
                          child: Container(
                            margin: EdgeInsets.only(top: 15),
                            alignment: Alignment.center,
                            width: 45,
                            height: 45,
                            decoration: BoxDecoration(
                                color: Color.fromRGBO(193, 193, 193, 1),
                                shape: BoxShape.circle),
                            child: Text(
                              '重置',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 50),
                          child: ElevatedButton(
                            onPressed: () {},
                            style: ElevatedButton.styleFrom(
                                // primary: Color.fromRGBO(193, 193, 193, 1),
                                minimumSize: Size(100, 30)),
                            child: Container(
                              width: 80,
                              height: 30,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '推荐配色',
                                    style: TextStyle(color: Colors.white),
                                  ),
                                  Icon(
                                    Icons.arrow_downward_rounded,
                                    size: 20,
                                  )
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                //开关
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: 40,
                  child: Row(
                    children: [
                      Container(
                        color: Colors.red,
                        width: MediaQuery.of(context).size.width * 0.33,
                        height: 40,
                        child: Row(
                          children: [
                            Switch(
                              value: switched,
                              onChanged: (value) {
                                setState(() {
                                  switched = value;
                                  if (!switched) return;
                                  for (Map i in foot) {
                                    i['active'] = false;
                                  }
                                });
                              },
                              activeColor: Colors.white,
                              activeTrackColor: Color.fromRGBO(251, 231, 5, 1),
                            ),
                            Container(
                              child: Text(
                                switched ? '左右脚相同' : '左右脚不同',
                                style: TextStyle(
                                    fontSize: 11, color: Colors.white),
                              ),
                            )
                          ],
                        ),
                      ),
                      Row(
                        children: foot
                            .map(
                              (item) => GestureDetector(
                                onTap: () {
                                  setState(() {
                                    if (switched) return;
                                    for (Map i in foot) {
                                      if (i['text'] == item['text']) {
                                        i['active'] = true;
                                      } else {
                                        i['active'] = false;
                                      }
                                    }
                                  });
                                },
                                child: Container(
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                      color: item['active']
                                          ? Colors.red
                                          : Color.fromRGBO(217, 217, 217, 1),
                                      border: Border(
                                          right: BorderSide(
                                              width: 0.5, color: Colors.grey))),
                                  width:
                                      MediaQuery.of(context).size.width * 0.33,
                                  height: 40,
                                  child: Container(
                                    child: Stack(
                                      alignment: Alignment.bottomRight,
                                      children: [
                                        Text(
                                          item['text'],
                                          style: TextStyle(
                                              color: item['active']
                                                  ? Colors.white
                                                  : Color.fromRGBO(
                                                      153, 153, 153, 1)),
                                        ),
                                        if (switched)
                                          Image.asset(
                                            'images/detail/disabled.png',
                                            width: 11,
                                            height: 11,
                                          ),
                                      ],
                                    ),
                                    color: item['active']
                                        ? Colors.red
                                        : Color.fromRGBO(217, 217, 217, 1),
                                  ),
                                ),
                              ),
                            )
                            .toList(),
                      ),
                      // Container(
                      //   alignment: Alignment.center,
                      //   color: Color.fromRGBO(217, 217, 217, 1),
                      //   width: MediaQuery.of(context).size.width * 0.33,
                      //   height: 40,
                      //   child: Container(
                      //     child: Stack(
                      //       alignment: Alignment.bottomRight,
                      //       children: [
                      //         Text(
                      //           '右脚',
                      //           style: TextStyle(
                      //               color: Color.fromRGBO(153, 153, 153, 1)),
                      //         ),
                      //         Image.asset(
                      //           'images/detail/disabled.png',
                      //           width: 11,
                      //           height: 11,
                      //         ),
                      //       ],
                      //     ),
                      //     color: Color.fromRGBO(217, 217, 217, 1),
                      //   ),
                      // ),
                    ],
                  ),
                ),

                Container(
                  padding: EdgeInsets.all(15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          //标题
                          Container(
                            child: Text(
                              '标题标题',
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(fontSize: 18),
                            ),
                            width: 202,
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 5),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Text(
                                  '￥455',
                                  style: TextStyle(fontSize: 18),
                                ),
                                Text(
                                  '￥111',
                                  style: TextStyle(
                                      decoration: TextDecoration.lineThrough,
                                      fontSize: 12,
                                      color: Color.fromRGBO(217, 217, 217, 1)),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                      GestureDetector(
                        onTap: () {
                          setState(() {
                            showCode = !showCode;
                          });
                        },
                        child: Container(
                          width: 97,
                          alignment: Alignment.center,
                          color: Color.fromRGBO(242, 242, 242, 1),
                          height: 31,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text('选择尺码'),
                              Icon(Icons.keyboard_arrow_down_sharp)
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(left: 15, right: 15),
                    decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              color: Color.fromRGBO(242, 242, 242, 1),
                              width: 1)),
                    )),
                //content
                if (showCode) Content(),
                //部件
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: Text('部件'),
                        margin: EdgeInsets.only(top: 15, left: 15, bottom: 15),
                      ),
                      Container(
                          child: Wrap(
                        children: [
                          Wrap(
                            children: partsList
                                .map((item) => GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        for (Map i in partsList) {
                                          print(item['text']);
                                          if (i['text'] == item['text']) {
                                            i['active'] = true;
                                          } else {
                                            i['active'] = false;
                                          }
                                        }
                                      });
                                    },
                                    //部件
                                    child: PartsWdiget(
                                      image: item['image'],
                                      text: item['text'],
                                      active: item['active'],
                                      item: item,
                                    )))
                                .toList(),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: 10),
                            child: Column(
                              children: [
                                Container(
                                  width: 65,
                                  height: 65,
                                  color: Color.fromRGBO(242, 242, 242, 1),
                                  child: Center(
                                    child: Image.asset(
                                      'images/login/logo.png',
                                      width: 40,
                                      height: 20,
                                    ),
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () async {
                                    // int selectedIndex =
                                    //     await _showCustomModalBottomSheet(
                                    //         context, ['1', '2']);
                                    // print(selectedIndex);
                                    ModalBottom modalBottom = ModalBottom();
                                    modalBottom.showCustomModalBottomSheet(
                                        context, CxContent());
                                    setState(() {
                                      showModal = !showModal;
                                    });
                                  },
                                  child: Container(
                                    margin: EdgeInsets.only(top: 15),
                                    child: Text(
                                      '刺绣',
                                      style: TextStyle(
                                        color: Color.fromRGBO(217, 217, 217, 1),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      )),
                    ],
                  ),
                ),
                //材质
                Container(
                  margin: EdgeInsets.only(top: 15, left: 15),
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          '材质',
                          style: TextStyle(color: Colors.black),
                        ),
                        margin: EdgeInsets.only(right: 20),
                      ),
                      Row(
                        children: materList
                            .map((item) => GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      for (Map i in materList) {
                                        if (i['text'] == item['text']) {
                                          i['active'] = true;
                                        } else {
                                          i['active'] = false;
                                        }
                                      }
                                    });
                                  },
                                  child: Container(
                                    width: 80,
                                    height: 30,
                                    alignment: Alignment.center,
                                    margin: EdgeInsets.only(right: 15),
                                    color: item['active']
                                        ? Colors.red
                                        : Color.fromRGBO(242, 242, 242, 1),
                                    child: Text(
                                      item['text'],
                                      style: TextStyle(
                                          color: item['active']
                                              ? Colors.white
                                              : Colors.black,
                                          fontSize: 14),
                                    ),
                                  ),
                                ))
                            .toList(),
                      )
                    ],
                  ),
                ),
                //颜色
                Container(
                  margin: EdgeInsets.only(left: 15, bottom: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        margin: EdgeInsets.only(top: 15, bottom: 15),
                        child: Text(
                          '颜色',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Wrap(
                        children: colorList
                            .map((item) => GestureDetector(
                                  onTap: () {
                                    setState(() {
                                      for (Map i in colorList) {
                                        if (i['text'] == item['text']) {
                                          i['active'] = true;
                                        } else {
                                          i['active'] = false;
                                        }
                                      }
                                    });
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    width: 80,
                                    height: 30,
                                    decoration: BoxDecoration(
                                        color: Color.fromRGBO(242, 242, 242, 1),
                                        border: Border.all(
                                            width: 0.5,
                                            color: item['active']
                                                ? Color(item['color'])
                                                : Colors.white)),
                                    child: Text(item['text']),
                                  ),
                                ))
                            .toList(),
                      )
                    ],
                  ),
                ),
                DefaultTabController(
                  length: tabs.length,
                  child: TabBar(
                    tabs: tabs,
                    labelStyle: TextStyle(fontWeight: FontWeight.bold),
                    unselectedLabelColor: Color.fromRGBO(102, 102, 102, 1),
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorColor: Colors.black,
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(
                        top: 10, left: 15, right: 15, bottom: 15),
                    child: GoodsEvlauate()),
              ],
            ),
          ),
          Row(
            children: [
              Container(
                width: MediaQuery.of(context).size.width * 0.2,
                height: 50,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 22,
                      height: 22,
                      child: Center(
                        child: Badge(
                          badgeContent: Text(
                            '3',
                            style: TextStyle(color: Colors.white),
                          ),
                          child: Icon(Icons.card_giftcard),
                        ),
                      ),
                    ),
                    Container(
                        child: Text(
                      '购物车',
                      style: TextStyle(
                          fontSize: 12,
                          color: Color.fromRGBO(153, 153, 153, 1)),
                    )),
                  ],
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.4,
                height: 50,
                color: Color.fromRGBO(213, 21, 25, 1),
                alignment: Alignment.center,
                child: Text(
                  '加入购物车',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, 'settlement');
                },
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.4,
                  height: 50,
                  color: Colors.black,
                  alignment: Alignment.center,
                  child: Text(
                    '立即购买',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
